<template>
  <div>
    <el-button
      size="small"
      icon="el-icon-printer"
      class="print-btn"
      @click="$print($refs.print, null)"
    >
      打印
    </el-button>
    <div
      class="handler-document"
      v-loading="loading"
      element-loading-background="rgba(255, 255, 255,1)"
      id="printContent"
      ref="print"
    >
      <div class="title">审批处理笺</div>
      <table class="table-wrapper" border="1px" cellspacing="0" cellpadding="0">
        <tr height="40">
          <td width="12%" align="center">发文字号</td>
          <td width="35%">
            <el-input
              v-if="isFirstHandler || isCirculation"
              v-model="document.pubPagerWord"
              placeholder="请输入发文字号"
            ></el-input>
            <span v-else class="input-content">{{
              pager.issued_number || ""
            }}</span>
          </td>
          <td width="12%" align="center">发文日期</td>
          <td width="35%" class="">
            <el-date-picker
              v-if="isFirstHandler || isCirculation"
              v-model="document.pubPagerDate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
            <span v-else class="input-content">{{
              parseTime(pager.issued_date, "{y}-{m}-{d}") || ""
            }}</span>
          </td>
        </tr>
        <tr height="40">
          <td align="center">文件标题</td>
          <td colspan="4" class="input-content">
            <span>{{ pager.title }}</span>
          </td>
        </tr>
        <tr height="40">
          <td width="12%" align="center">缓急程度</td>
          <td width="35%" class="input-content">
            <span>{{ pager.emergency_level }}</span>
          </td>
          <td width="12%" align="center">任务类别</td>
          <td width="35%" class="input-content">
            <span>{{ pager.data_type }}</span>
          </td>
        </tr>
        <tr height="40">
          <td width="10%" align="center">上报类型</td>
          <td width="35%" class="input-content">
            <span>{{ pager.classify_name }}</span>
          </td>
          <td colspan="2" align="center"></td>
          <!-- <td width="35%" class="input-content">
            <span>{{ pager.data_type}}</span>
          </td> -->
        </tr>
        <tr
          class="situation"
          v-for="(val, key, index) in pointData"
          :key="index"
        >
          <td width="30" align="center">{{ key }}</td>
          <td colspan="4" class="content">
            <div class="inform" v-for="(p, i) in pointData[key]" :key="i">
              <div>{{ p.message }}</div>
              <div class="info">
                <div class="info-name">{{ p.userId }}</div>
                <div>{{ parseTime(p.time) }}</div>
              </div>
            </div>
          </td>
        </tr>
        <tr v-if="!queryData.isHand" class="situation">
          <td width="30" align="center">审批意见</td>
          <td colspan="4" class="content">
            <el-input type="textarea" :rows="4" v-model="comment"></el-input>
          </td>
        </tr>
      </table>
      <el-divider></el-divider>
    </div>
  </div>
</template>
  <script>
import { parseTime } from "@/utils/index.js";
export default {
  name: "ApprovePager",
  props: {
    pager: {
      type: Object,
      default: () => {},
    },
    queryData: {
      type: Object,
      default: () => {},
    },
    pointData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    pager: {
      handler(data) {
        const { issued_number, issued_date } = data;
        this.document = {
          pubPagerWord: issued_number,
          pubPagerDate: issued_date,
        };
      },
      immediate: true,
    },
  },
  computed: {
    isFirstHandler() {
      const { issued_number = "", issued_date = "" } = this.pager;
      return (
        !this.queryData.isHand &&
        this.queryData.startUserId == this.id &&
        !issued_number &&
        !issued_date
      );
    },
    isCirculation() {
      const { issued_number = "", issued_date = "" } = this.pager;
      return (
        this.isFormKeyContain("circulation") && !issued_number && !issued_date
      );
    },
  },
  data() {
    return {
      loading: false,
      comment: '',
      document: {
        pubPagerWord: "",
        pubPagerDate: "",
      },
    };
  },
  methods: {
    parseTime,
    // 判断formKey是否包含指定值
    isFormKeyContain(value) {
      const { formKey } = this.queryData;
      return formKey && formKey.indexOf(value) > -1;
    },
  },
};
</script>
  <style lang="scss">
.handler-document {
  table td {
    // border-color: red;
    border: 1px solid;
  }
  .table-wrapper {
    width: 100%;
    margin: 0 auto;
    max-width: 800px;
    font-size: 14px;
    font-weight: bold;
    color: red;
    border-collapse: collapse;

    td {
      span {
        display: inline-block;
        margin-left: 6px;
        color: #000;
        font-weight: normal;
      }
    }

    .el-input__inner {
      background-color: transparent;
      border: 0;
    }
  }
}
</style>
<style lang="scss">
.print-btn {
  position: absolute;
  right: 20px;
}
.handler-document {
  margin: 0 0 20px;
  overflow-x: hidden;
  .title {
    text-align: center;
    font-size: 25px;
    color: red;
    padding: 15px 0px;
  }

  .table-wrapper {
    .first-row {
      height: 40px;
      td:nth-child(odd) {
        padding: 8px 6px;
        letter-spacing: 3px;
        line-height: 20px;
      }
    }
    .situation {
      min-height: 80px;
      height: 80px;

      .content {
        padding: 10px;

        .inform {
          height: 70px;
          padding: 10px 10px 10px 0;
          /* margin: 0 10px; */
          border-bottom: 1px solid #e0e0e0;
          color: #000;
          font-weight: normal;

          &-comment {
            width: 60%;
          }

          .info {
            float: right;
            font-size: 12px;
            text-align: center;
            color: #797979;

            &-name {
              padding: 6px;
            }
          }

          &:last-child {
            border: none;
          }
        }
      }
    }
    tr {
      .input-content {
        padding-left: 10px;
      }
    }
    .el-select {
      width: 100%;
    }
    .el-input__inner {
      background-color: transparent;
      border: 0;
    }
  }
}
</style>

      
